<template>
  <div style="display: flex;justify-content: center;align-items: center;">
    <div v-show="TFValue" class="common-layout" style="width: 1100px;">
      <el-container>
        <el-header
            style="border: 2px cadetblue solid;height: 100px;display: flex; justify-content: center; align-items: center;border-radius: 10px">
          <div>
            <span v-if="props.process == '1'" class="titleFont">干泵初检</span>
            <span v-else-if="props.process == '2'" class="titleFont">干泵拆解</span>
            <span v-else-if="props.process == '3'" class="titleFont">干泵清洗</span>
            <span v-else-if="props.process == '4'" class="titleFont">严损判断</span>
            <span v-else-if="props.process == '5'" class="titleFont">罗氏干泵装配</span>
            <span v-else-if="props.process == '6'" class="titleFont">多级干泵装配</span>
            <span v-else-if="props.process == '7'" class="titleFont">吊装</span>
            <span v-else-if="props.process == '8'" class="titleFont">机组装配记录</span>
            <span v-else-if="props.process == '9'" class="titleFont">机组电控系统检验</span>
            <span v-else class="titleFont">出厂测试报告</span>
          </div>
        </el-header>
        <el-main style="background-color: rgb(240,247,241);border-radius: 10px">
          <div style="display: flex; justify-content: center;">
            <el-table :data="tableData" stripe style="width: 100%;height: 529px;background-color: rgb(240,247,241);">
              <el-table-column show-overflow-tooltip prop="work_order" label="工单" width="137"/>
              <el-table-column show-overflow-tooltip prop="material_No" label="物料编号" width="137"/>
              <el-table-column show-overflow-tooltip prop="name" label="名称" width="137"/>
              <el-table-column show-overflow-tooltip prop="pump_Unit_Number" label="泵组编号" width="137"/>
              <el-table-column show-overflow-tooltip prop="case" label="Case" width="137"/>
              <el-table-column show-overflow-tooltip prop="customer" label="客户" width="137"/>
              <el-table-column show-overflow-tooltip prop="urgent" label="加急" width="137">
                <template #default="scope">
                  <el-tag
                      :type="scope.row.urgent === true ? 'danger' : 'success'"
                      disable-transitions
                  ><span v-if="scope.row.urgent === true">加急</span><span v-else>正常</span></el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column label="功能" #default="scope">
                <!--使用 <template #default="scope"> 来定义作用域插槽。这里的 scope 是一个对象，包含了当前行的数据。-->
                <el-button type="warning" plain @click="overhaul(scope.row.case)">检修</el-button><!--@click="test1(scope.row.input_Case)"-->
              </el-table-column>
            </el-table>
          </div>
          <div style="display: flex; justify-content: center;">
            <!-- 分页组件 -->
            <el-pagination
                size="small"
                layout="prev, pager, next"
                :total="total"
                :page-size="10"
                background
                :current-page="currentPage"
                @current-change="handleCurrentChange"
            />
          </div>
        </el-main>
      </el-container>
    </div>
    <div v-show="!TFValue">
                  <el-button style="width: 100%;height: 40px;font-size: 20px" type="primary"
                             @click="TFValueReturn()" plain>返回
                  </el-button>
      <div v-if="props.process == '1'">
        <Initial_maintenance_inspection_report v-bind:CaseValue="Case"/>
      </div>
      <div v-else-if="props.process == '2'">
        <Repair_and_Disassembly_Report v-bind:CaseValue="Case"/>
      </div>
      <div v-else-if="props.process == '3'">
        <Pump_maintenance_and_disassembly_report v-bind:CaseValue="Case"/>
      </div>
      <div v-else-if="props.process == '4'">
        <Serious_damage_and_quality_assessment v-bind:CaseValue="Case"/>
      </div>
      <div v-else-if="props.process == '5'">
        <Assembly_record_of_dry_pump v-bind:CaseValue="Case"/>
      </div>
      <div v-else-if="props.process == '6'">
        <Multistage_dry_pump_assembly_records v-bind:CaseValue="Case"/>
      </div>
      <div v-else-if="props.process == '7'">
        <Hoisting_pump v-bind:CaseValue="Case"/>
      </div>
      <div v-else-if="props.process == '8'">
        <Dry_pump_unit_assembly_record v-bind:CaseValue="Case"/>
      </div>
      <div v-else-if="props.process == '9'">
        <Dry_Pump_Unit_Electrical_Control_System_Inspection_Record v-bind:CaseValue="Case"/>
      </div>
      <div v-else-if="props.process == '10'">
        <Factory_test_report v-bind:CaseValue="Case"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Initial_maintenance_inspection_report from '../components/Initial_maintenance_inspection_report.vue';
import Repair_and_Disassembly_Report from '../components/Repair_and_Disassembly_Report.vue';
import Pump_maintenance_and_disassembly_report from '../components/Pump_maintenance_and_disassembly_report.vue'
import Serious_damage_and_quality_assessment from '../components/Serious_damage_and_quality_assessment.vue'
import Assembly_record_of_dry_pump from '../components/Assembly_record_of_dry_pump.vue'
import Multistage_dry_pump_assembly_records from '../components/Multistage_dry_pump_assembly_records.vue'
import Hoisting_pump from '../components/Hoisting_pump.vue'
import Dry_pump_unit_assembly_record from '../components/Dry_pump_unit_assembly_record.vue'
import Dry_Pump_Unit_Electrical_Control_System_Inspection_Record
  from '../components/Dry_Pump_Unit_Electrical_Control_System_Inspection_Record.vue'
import Factory_test_report from '../components/Factory_test_report.vue'
import {defineProps, reactive, ref, watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";


const tableData = reactive([])
const TFValue = ref(true)
const total = ref(null); // 总数据，根据组件数量来设置
const currentPage = ref(1); // 当前页码
// 页码改变时的事件处理
const handleCurrentChange = (val) => {
  currentPage.value = val;
};
const gongxuData = ref(null)
const Case = ref(null)
const props = defineProps({
  process: {
    type: String,
    default: ''
  }
});
function TFValueReturn(){
  Case.value = null
  TFValue.value = true
  selpage(currentPage.value)
}
watch(currentPage, (New) => {
  selpage(New)
})
watch(() => props.process, (newVal) => {
  TFValue.value = true
  gongxuData.value = newVal
  selpage(currentPage.value)
});

function selpage(page) {
  if (gongxuData.value != null) {
    axios.get('http://192.168.110.84:8081/staff/gongxuData/' + gongxuData.value + '/' + page)
        .then(response => {
          // 请求成功后的处理
          console.log(response.data);
          tableData.splice(0, tableData.length);//清空原本的数组
          if (response.data.code === 1) {
            Object.keys(response.data.data).forEach(key => {
              tableData[key] = response.data.data[key];
            });
          } else {
            ElMessage.error(response.data.message)
          }
        });
      axios.get('http://192.168.110.84:8081/staff/gongxuData/' + gongxuData.value)
        .then(response => {
          // 请求成功后的处理
          console.log(response.data);
          if (response.data.code === 1) {
            total.value = response.data.data;
          } else {
            ElMessage.error(response.data.message)
          }
        });
  }

}

function overhaul(a) {
  Case.value = a
  TFValue.value = false
}

import { provide } from 'vue';
provide('TFValueReturn', TFValueReturn);

</script>

<style scoped>
/*.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}*/

.titleFont {
  font-size: 50px;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
</style>